<template>
  <div>
    <div class="operate-bar">
      <div class='gouwuche'>
        <div style='display:flex'>
          <div @click="showCartList" class="zan-icon zan-icon-cart icon-cart">
            <div class="number-msg" v-if="cart_list.length!=0">{{cup_number}}</div>
          </div>
          <div class='gouwuche-price' v-if="sum_monney==0">购物车是空的</div>
          <div class='gouwuche-price' style='color:white;font-size:50rpx' v-if="sum_monney!=0">¥ {{sum_monney/100}}</div>
        </div>
      </div>
      <div class="submit-btn" :class="sum_monney!=0?'activity-color-bg':''" @click='goBalance'>
        <div class="submit-btn-label" :class="sum_monney!=0?'color-white':''">选好了</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      
    }
  },
  computed: {
    ...mapGetters([
      'cart_list',
      'cup_number',
      'sum_monney',
      'cart_list_status',
    ])
  },
  methods: {
    ...mapActions([
      'setCartListStatus',
      'setCartLength'
    ]),
    showCartList(){
      if (this.cart_list.length !== 0) {
        this.setCartListStatus(!this.cart_list_status)
        this.setCartLength(this.cart_list.length)
      }
    },
    goBalance(){
      if (this.sum_monney != 0) {
        wx.navigateTo({
          url: 'balance'
        })
      }
    }
  }
}
</script>

<style >
.operate-bar{
  z-index: 1001;
  position: fixed;
  bottom: 0px;
  height:55px;
  line-height: 55px;
  width:100%;
  display: flex;
}
.gouwuche{
  width:75%;
  background:#000000;
  height: 100%;
}
.icon-cart{
  color: white;
  font-size: 35px;
  height: 55px;
  line-height: 55px;
  padding-left: 20px;
}
.number-msg{
  background:red;
  color:white;
  font-size:10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  position: absolute;
  text-align: center;
  top:5px;
  left:50px;
}
.gouwuche-price{
  color:white;
  display:flex;
  align-items: center;
  margin-left:30px;
  font-size:20px
}
.submit-btn{
  height:100%;
  background:#F7F7F7;
  width:25%;
  display:flex;
}
.submit-btn-label{
  color:#A9A9A9;
  font-size:20px;
  margin:auto;
}
.activity-color-bg{
  background:#FF9C35;
}
.submit-btn-label{
  color:#A9A9A9;
  font-size:20px;
  margin:auto;
}
.color-white{
  color:white;
}
</style>
